const info = [
    {
        id: 1,
        small_img: './images/small1.png',
        big_img: './images/big1.png'
    },

    {
        id: 2,
        small_img: './images/small2.jpg',
        big_img: './images/big2.jpg'
    },

    {
        id: 3,
        small_img: './images/small3.jpg',
        big_img: './images/big3.jpg'
    },

    {
        id: 4,
        small_img: './images/small4.jpg',
        big_img: './images/big4.jpg'
    },

    {
        id: 5,
        small_img: './images/small5.jpg',
        big_img: './images/big5.jpg'
    }
]

let box = document.querySelector('.big > .content > .left')


box.innerHTML = `
    <div class="show">
        <img src="${ info[0].big_img }" alt="">
        <div class="asks"></div>
    </div>
    <ul class="list">
        <li><img
        src="${ info[0].small_img }"
        data-show="${ info[0].big_img }"
        data-enlarge="${ info[0].big_img }"
        alt=""></li>
        <li><img
        src="${ info[1].small_img }"
        data-show="${ info[1].big_img }"
        data-enlarge="${ info[1].big_img }"
        alt=""></li>
        <li><img
        src="${ info[2].small_img }"
        data-show="${ info[2].big_img }"
        data-enlarge="${ info[2].big_img }"
        alt=""></li>
        <li><img
        src="${ info[3].small_img }"
        data-show="${ info[3].big_img }"
        data-enlarge="${ info[3].big_img }"
        alt=""></li>
        <li><img
        src="${ info[4].small_img }"
        data-show="${ info[4].big_img }"
        data-enlarge="${ info[4].big_img }"
        alt=""></li>
    </ul>
    <div class="enlarge" style="background-image: url('${ info[0].big_img }')"></div>
`



class Enlarge {
    constructor (select) {
      // 有一些内容
      // 0. 范围元素
      this.ele = document.querySelector(select)
      // 1. 遮罩层盒子
      this.mask = this.ele.querySelector('.big > .content > .left > .show > .asks')
      // 2. 放大图片的盒子
      this.enlarge = this.ele.querySelector('.big > .content > .left > .enlarge')
      // 3. 列表盒子
      this.list = this.ele.querySelector('.big > .content > .left > .list')
      // 4. 展示图片盒子
      this.show = this.ele.querySelector('.big > .content > .left > .show')
      // 5. show 盒子的尺寸
      this.show_width = this.show.clientWidth
      this.show_height = this.show.clientHeight
      // 6. mask 盒子的尺寸
      // 获取非行内样式
      this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
      this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
      // 7. 背景图片尺寸
      // 获取 backgroundSize 样式
      this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
      this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
  
      this.init()
    }
    // 0. 启动器
    init () {
      this.setScale()
      this.overOut()
      this.move()
      this.listChange()
    }
  
    // 1. 调整尺寸
    setScale () {
      // 求出 enlarge 盒子应该的尺寸
      this.enlarge_width = this.mask_width * this.bg_width / this.show_width
      this.enlarge_height = this.mask_height * this.bg_height / this.show_height
  
      // 直接给 enlarge 盒子进行赋值
      this.enlarge.style.width = this.enlarge_width + 'px'
      this.enlarge.style.height = this.enlarge_height + 'px'
    }
  
    // 2. 移入移出
    overOut () {
      // 2-1. 移入事件
      this.show.addEventListener('mouseover', () => {
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'
      })
  
      // 2-2. 移出事件
      this.show.addEventListener('mouseout', () => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
      })
    }
  
    // 3. 移动联动
    move () {
      // 3-1. 绑定事件
      this.show.addEventListener('mousemove', e => {
        e = e || window.event
  
        // 3-2. 获取坐标点
        let x = e.offsetX - this.mask_width / 2
        let y = e.offsetY - this.mask_height / 2
  
        // 3-3. 边界值判断
        if (x <= 0) x = 0
        if (y <= 0) y = 0
        if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
        if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
  
        // 3-4. 给元素进行赋值
        this.mask.style.left = x + 'px'
        this.mask.style.top = y + 'px'
  
        // 公式: enlarge 移动距离 = enlarge 盒子尺寸 * mask 盒子移动距离 / mask 盒子尺寸
        const bg_x = this.enlarge_width * x / this.mask_width
        const bg_y = this.enlarge_height * y / this.mask_height
  

        this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
      })
  
    }
  
    // 4. 列表切换
    listChange () {
      this.list.addEventListener('click', e => {
        e = e || window.event
        const target = e.target || e.srcElement
  
        // 判断点击了
        if (target.nodeName === 'IMG') {
          const showUrl = target.dataset.show
          const enlargeUrl = target.dataset.enlarge
  
          this.show.firstElementChild.src = showUrl

          this.enlarge.style.backgroundImage = `url(${ enlargeUrl })`
  
          for (let i = 0; i < this.list.children.length; i++) {
            this.list.children[i].classList.remove('active')
          }
          target.parentElement.classList.add('active')
        }
      })
    }
  }

new Enlarge('#enlarge')


let indexHtml = document.querySelector('.header > .content > .header_left > li:nth-child(1)')
let login = document.querySelector('.header > .content > .header_right > li:nth-child(1)')
let register = document.querySelector('.header > .content > .header_right > li:nth-child(2)')


indexHtml.onclick = function () {
    window.location.href = './index.html'
}

login.onclick = function () {
    window.location.href = './login.html'
}

register.onclick = function () {
    window.location.href = './register.html'
}